<template>
  <div>
    <!-- 
      注意事项:
      checkbox 很特殊, 它分为两种情况
      1. 绑定的值是数组
        会将当前复选框的 value 加入到数组中
        一般用于多选操作, 例如多选题, 兴趣爱好
      2. 绑定的值是非数组 (隐式转换为 boolean)
        会将当前复选框的 checked 属性同步给变量
     -->
    用户名：<input v-model="msg" type="text"><br>
    自我介绍：<textarea v-model="intro" name="" id="" cols="30" rows="10"></textarea><br>
    <input type="checkbox" v-model="hodby" value="smoke">抽烟
    <input type="checkbox" v-model="hodby" value="drink">喝酒<br>
    全选: <input v-model="isAll" type="checkbox"><br>
    <button @click="login">提交</button>
    

  </div>
</template>

<script>
export default {
  name: 'VueDemoApp',

  data() {
    return {
      msg:'',
      intro:'',
      hodby:[],
      isAll:false
    };
  },

  mounted() {
    
  },

  methods: {
    login(){
      console.log(this.msg);
      console.log(this.intro);
      console.log(this.hodby);
    }
  },
};
</script>

<style>

</style>